<template>
	<view class="gift" :style="'background:' + bgcolor[reqData.Name]">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<view class="backbox" :style="isNav ? 'background: #FFFFFF;' : ''">
				<topStatus></topStatus>
				<view class="tabsBack">
					<uni-icons type="left" color="#333" size="30" @click="goBack()"></uni-icons>
				</view>
			</view>

			<image class="heatbanimg" :src="reqData.Banner" mode="widthFix"></image>
			<!-- <view class="topBox">
				<view class="head1">
					<view class="searchBox">
						<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721975652195245.png" mode="">
						</image>
						<input type="text" v-model="searchValue" @input="searchCustomers" placeholder="请输入搜索内容"/>
					</view>
				</view>
				<view class="topList">
					<block v-for="(item, index) in tabList" :key="index">
						<view class="topCell" :class="item.value == nowIndex ? 'topCellIng' : ''" @click="chooseTab(item.value)">
							{{ item.label }}
							<view class="unReadNum" v-if="item.count">{{item.count}}</view>
						</view>
					</block>
				</view>
			</view> -->
			<view style="height: 36rpx;"></view>

			<block v-if="ProductList && ProductList.length > 0">
				<view class="item" v-for="(item, index) in ProductList" :key="index">
					<view class="single">
						<view class="border" @click="goDetail(item.ID)">
							<view class="shop_tag" :class="item.PromotionType == '预售' ? 'shop_tag_green' : ''"
								v-if="item.PromotionType">
								{{ item.PromotionType }}
							</view>
							<view class="single_img">
								<image :src="item.Images ? item.Images.split(',')[0] : ''" mode="aspectFill"></image>
							</view>
							<view class="single_right">
								<view class="single_title">
									<view class="single_title_text">
										{{ item.ProductName || '--' }}
									</view>
									<!-- <view class="single_title_state">{{getStatus(item.Status)}}</view> -->
								</view>


								<view class="single_tabs" v-if="item.ProductPromotionList.length">
									<view class="single_tab" v-for="(tag, i) in item.ProductPromotionList" :key="i">{{
										tag.Title }}</view>
								</view>
								<view class="single_spec">
									<view class="single_style">
										{{ '产地：' + (item.Province ? item.Province : '') + (item.City ? '·' + item.City : '') + (item.Area ? '·' + item.Area : '') + (item.Town ? '·' + item.Town : '') }}
									</view>
									<!-- <view class="single_style">数量：{{  el.Qty || '--' }}</view> -->
								</view>
								<view class="single_bottom">
									<view class="single_price">
										<view class="dollor">￥</view>
										{{ item.Price || '--' }}
									</view>
									<view class="user_send">
										<view class="pay_cout">
											已售{{ item.VirtualSellNum || 0 }}
										</view>
										<view class="col_btn">购买</view>
										<!-- <view class="head">
											<image :src="item.SenderHeadImgUrl || 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1722996894207462.png'" mode="aspectFill"></image>
										</view>
										<view class="name">
											{{item.SenderName || '--'}}赠送
										</view> -->
									</view>
								</view>
							</view>
						</view>
						<!-- <view class="time">
							订单时间：{{$util.formatDateTime(item.OrderTime)}}
						</view> -->
					</view>

				</view>
			</block>
			<block v-else>
				<EmptyBox text="暂无数据"></EmptyBox>
			</block>
			<BtmLogo></BtmLogo>
		</block>
	</view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
	components: {
		topStatus
	},
	data() {
		return {
			load: false,
			PageIndex: 1,
			PageSize: 10,
			ProductList: [],
			isMore: true,
			banimg: [],
			sortID: '',
			reqData: [],
			fixboxHeight: 0,
			isNav: false,
			bgcolor: {
				'现摘水果': '#E2FCEC',
				'蔬菜蛋品': '#FFECCA',
				'肉类家禽': '#FAECD9',
				'海鲜水产': '#C0E3FF',
				'自晒干货': '#FAEFE9',
				'五谷杂粮': '#F4EEE3',
				'花卉绿植': '#FBECE8',
				'原产茶叶': '#284F4D',
				'休闲零食': '#FEE2BF',
				'粮油调味': '#FFF1DF',
			}
		};
	},
	onLoad(e) {
		this.getHeight()
		this.sortID = e.id
		this.sort_Info()
		// this.SeasonProducts()
		// this.GetBanner()
	},
	onReachBottom() {
		if (this.isMore) {
			this.PageIndex++;
			this.SeasonProducts();
		}
	},
	onPageScroll(e) {
		// console.log(e.scrollTop);
		this.isNav = e.scrollTop > this.fixboxHeight ? true : false
	},
	methods: {

		// 点击跳转详情
		goDetail(id) {
			this.nav_to(`/pages/shop/detail?id=${id}`)
		},
		async sort_Info() {
			let res = await this.$api.post('Module/Info', {
				ID: this.sortID
			})
			if (res.code == 0) {
				this.reqData = res.data
				
				this.SeasonProducts()
				
				
				
			}
		},
		async SeasonProducts() {
			let url = this.reqData.ProductCatalogID>0 ?  'Products/SearchByCatalog' :'Module/ProductList'
			let data = {
				PageIndex: this.PageIndex,
				PageSize: this.PageSize,
			}
			this.reqData.ProductCatalogID>0 ? data.ProductCatalogID = this.reqData.ProductCatalogID : data.ID =this.sortID
			let res = await this.$api.post(url, data)
			if (res.code == 0) {
				if (this.PageIndex == 1) {
					// for (let i = 0; i < 15; i++) {
					// 	this.ProductList.push(res.data)
					// }
					this.ProductList = res.data
				} else {
					this.ProductList = this.ProductList.concat(res.data)
				}
				this.load = true
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
			}
		},
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				// 如果页面栈长度大于1，则说明有上一页，可以返回
				uni.navigateBack();
			} else {
				// 如果没有上一页，则导航到首页
				uni.reLaunch({
					url: '/pages/tab/home'
				});
			}
		},
		getHeight() {
			let that = this;
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(that);
				query.select('.heatbanimg').boundingClientRect(data => {
					if (data) {
						// data.height 就是元素的高度
						that.fixboxHeight = data.height + 20;
					}
				}).exec();
			}, 500);

		},
	},
}
</script>
<style lang='scss'>
page {
	// height: 100%;
	background: #f6f6f6;
}

.backbox {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}

.tabsBack {
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	// justify-content: center;
	padding-left: 16rpx;

	.logoimg {
		width: 192rpx;
		height: 48rpx;
		margin-left: 24rpx;
	}
}

.heatbanimg {
	width: 100%;
	// position: fixed;
	// top: 0;
	// left: 0;
}

.gift {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 100rpx;
	min-height: 100vh;

	.item {
		// margin: 30rpx 0;

		.single {
			width: 700rpx;
			// height: 252rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			.time {
				color: #999;
				font-size: 26rpx;
				padding-bottom: 20rpx;
			}

			.border {
				display: flex;
				align-items: center;
				// border-bottom: 1rpx solid #E4E4E4;
				padding: 20rpx 0;
				position: relative;

				.shop_tag {
					position: absolute;
					top: 0;
					left: -20rpx;
					z-index: 2;
					padding: 8rpx 12rpx;
					background-color: #FF471A;
					color: #fff;
					font-size: 22rpx;
					border-radius: 16rpx 0 16rpx 0;
				}

				.shop_tag_green {
					background-color: #1ed68d;
				}

				.single_img {
					width: 204rpx;
					height: 204rpx;
					margin-right: 10rpx;
					border-radius: 8rpx;
					overflow: hidden;
					/* position: relative; */
					image {
						width: 100%;
						height: 100%;
					}
				}

				.single_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 10rpx;
					/* margin: 0 5rpx 0 10rpx; */
					min-height: 200rpx;

					.single_title {
						width: 100%;
						display: flex;
						// align-items: center;
						justify-content: space-between;

						.single_title_text {
							// width: 340rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							display: -webkit-box;
							/*弹性伸缩盒子模型显示*/
							-webkit-box-orient: vertical;
							/*排列方式*/
							-webkit-line-clamp: 2;
							/*显示文本行数(这里控制多少行隐藏)*/
							overflow: hidden;
							/*溢出隐藏*/
						}

						.single_title_state {
							// flex: 1;
							font-weight: 500;
							font-size: 28rpx;
							color: #5d8bf8;
						}
					}

					.single_tabs {
						display: flex;
						flex-wrap: wrap;
						margin: 10rpx 0 10rpx -5rpx;

						.single_tab {
							height: 36rpx;
							border-radius: 8rpx;
							border: 1rpx solid #f91c1c;
							font-weight: 500;
							font-size: 20rpx;
							color: #f91c1c;
							margin: 5rpx;
							padding: 0 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.single_spec {
						font-size: 26rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						/* margin-top: 24rpx; */
						margin-bottom: 24rpx;

						.single_style {
							font-weight: 500;
							font-size: 24rpx;
							// color: #999999;
							color: #5d8bf8;
						}
					}

					.single_bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-wrap: wrap;

						.single_price {
							font-weight: bold;
							font-size: 42rpx;
							color: #5d8bf8;
							display: flex;
							align-items: baseline;

							.dollor {
								font-weight: bold;
								font-size: 24rpx;
								color: #5d8bf8;
							}
						}

						.user_send {
							display: flex;
							align-items: center;

							.col_btn {
								width: 128rpx;
								height: 64rpx;
								background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
								border-radius: 32rpx;
								font-size: 28rpx;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.pay_cout {
								font-size: 24rpx;
								color: #999;
								margin-right: 14rpx;
							}

							.head {
								width: 40rpx;
								height: 40rpx;
								margin-right: 8rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.name {
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
			}

			.border:last-child {
				border-bottom: none;
			}
		}
	}
}

.topBox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #ffffff;

	.head1 {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: fixed;
		// top: 0;
		// left: 0;
		box-shadow: 0 0 8rpx #ccc;

		.searchBox {
			width: 93%;
			height: 72rpx;
			background: #F6F6F6;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			color: #666666;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 10rpx 0 20rpx;
			}

			input {
				width: 80%;
			}
		}
	}

	.topList {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.topCell {
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			position: relative;
		}

		.topCellIng {
			position: relative;
			color: #5d8bf8;

			&::before {
				position: absolute;
				content: '';
				left: 0;
				bottom: -18rpx;
				width: 100%;
				height: 6rpx;
				background: #5d8bf8;
				border-radius: 5rpx;
			}
		}

		.unReadNum {
			max-width: 48rpx;
			min-width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: -30rpx;
			top: -10rpx;
			font-size: 22rpx;
			background-color: #FC201C;
			color: white;
			padding: 5rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>